<template>
  <div class="page-miH page-bgBack">
    <PageHeader @back="$router.go(-1)" subTitle="返回">
      {{ actionDetail.year + "年" + actionDetail.month + "月" + actionDetail.missionName }}</PageHeader
    >
    <div class="payslip-detail">
      <!-- <a-row type="flex">
      <a-col>
        <a-button icon="left" type="link" @click="goBack">返回</a-button>
      </a-col>
      <a-col class="full ta-center fs16">
        <strong>{{ tabs.name }}</strong>
      </a-col>
    </a-row> -->
      <!-- <a-row class="salary" type="flex" align="middle" justify="space-between">
      <a-col class="item" :span="10">
        <a-row ref="box" type="flex" align="middle" justify="space-between" @click.native="getItem">
          <a-col :span="7">
            <a-row>
              <strong class="primary">总共</strong>
            </a-row>
            <a-row class="primary">
              <a-statistic :value="tabs.numAll || 0">
                <template #suffix>人</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.companySocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.companyPfAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="8">
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="10">
            <a-row>
              <strong class="sub_tit">个人社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalSocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="10">
            <a-row class="ove">
              <strong class="sub_tit">个人公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalPfAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="4">
        <a-row>
          <strong class="sub_tit">总合计预缴金额</strong>
        </a-row>
        <a-row>
          <a-statistic :precision="2" :value="tabs.allAmount || 0">
            <template #prefix>￥</template>
          </a-statistic>
        </a-row>
      </a-col>
    </a-row> -->
      <div class="titleBox">
        <div style="width:40%;height: 100px;border-radius: 4px;border: 1px solid #E8E8E8;display:flex;padding:22px">
          <div
            style="text-align: center;line-height:52px;width:200px;font-size: 18px;font-weight: 500;color: #3C3D43;border-right:1px solid #E8E8E8"
          >
            合计
          </div>
          <div style="padding-left:150px;cursor:pointer" @click="changeTab('all')">
            <div :class="params.state === undefined ? 'titleStyleSelect' : 'titleStyle'">总派单</div>
            <div :class="params.state === undefined ? 'contentStyleSelect' : 'contentStyle'">
              {{ actionDetail.dispatchEmpCount || 0
              }}<span :class="params.state === undefined ? 'personStyleSelect' : 'personStyle'">人</span>
            </div>
          </div>
          <div></div>
        </div>
        <div style="padding:22px 0;margin-left:10px;width:60%;height: 100px;border-radius: 4px;border: 1px solid #E8E8E8;display:flex">
          <div style="width:33%;padding-left:24px;border-right:1px solid #E8E8E8;cursor:pointer" @click="changeTab(1)">
            <div :class="params.state === 1 ? 'titleStyleSelect' : 'titleStyle'">已完成</div>
            <div :class="params.state === 1 ? 'contentStyleSelect' : 'contentStyle'">
              {{ actionDetail.completedCount || 0 }}<span :class="params.state === 1 ? 'personStyleSelect' : 'personStyle'">人</span>
            </div>
          </div>
          <div style="width:33%;padding-left:24px;border-right:1px solid #E8E8E8;cursor:pointer" @click="changeTab(0)">
            <div :class="params.state === 0 ? 'titleStyleSelect' : 'titleStyle'">未完成</div>
            <div :class="params.state === 0 ? 'contentStyleSelect' : 'contentStyle'">
              {{ actionDetail.unfinishedCount || 0 }}<span :class="params.state === 0 ? 'personStyleSelect' : 'personStyle'">人</span>
            </div>
          </div>
          <div style="width:33%;padding-left:24px;cursor:pointer" @click="changeTab(2)">
            <div :class="params.state === 2 ? 'titleStyleSelect' : 'titleStyle'">异常</div>
            <div :class="params.state === 2 ? 'contentStyleSelect' : 'contentStyle'">
              {{ actionDetail.abnormalCount || 0 }}<span :class="params.state === 2 ? 'personStyleSelect' : 'personStyle'">人</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <a-row class="top">
      <a-tabs :default-active-key="defaultKey" @change="changeTab">
        <a-tab-pane key="all" :tab="`总派单${actionDetail.dispatchEmpCount || 0}人`" />
        <a-tab-pane :key="1" :tab="`已完成${actionDetail.completedCount || 0}人`" />
        <a-tab-pane :key="0" :tab="`未完成${actionDetail.unfinishedCount || 0}人`" />
        <a-tab-pane :key="2" :tab="`异常${actionDetail.abnormalCount || 0}人`" />
      </a-tabs>
    </a-row> -->
      <!-- <a-input-search placeholder="搜索姓名" style="width: 200px;margin-top:24px" @search="onSearchName" /> -->
      <a-row type="flex" justify="end">
        <a-button style="margin-top:15px;" :loading="loading" @click="daochu" type="primary" ghost>
          导出
        </a-button>
      </a-row>
      <a-table
        style="margin-top:10px"
        :columns="columns"
        :scroll="{ x: 1200 }"
        :data-source="datalist"
        @change="handleTableChange"
        :pagination="pagination"
        row-key="id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
      >
        <div slot="state" slot-scope="text">
          <!-- {{ ["未完成", "已完成", "异常"][text] }} -->
          <span v-if="text === 0" style="display:flex;justify-content: center;align-items: center;width:100%">
            <div style=" border-radius:50%;height:4px;width:4px;background:#FFBB00" />
            <span style="margin-left:5px">未完成</span>
          </span>
          <span v-if="text === 1" style="display:flex;justify-content: center;align-items: center;width:100%">
            <div style=" border-radius:50%;height:4px;width:4px;background:#32CCAA" />
            <span style="margin-left:5px">已完成</span></span
          >
          <span v-if="text === 2" style="display:flex;justify-content: center;align-items: center;width:100%">
            <div style=" border-radius:50%;height:4px;width:4px;background:#FF7085" />
            <span style="margin-left:5px">异常</span></span
          >
        </div>
        <div slot="feedbackDate" slot-scope="text">
          {{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "--" }}
        </div>
      </a-table>
      <!-- <table-detail :options="allOptions" @change="handleTable" /> -->
      <feed-back :visible="feedVisible" :options="feedOptions" @change="handleDetail" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
import tableDetail from "./common/table-detail-less";
import feedBack from "./common/feed-back";
import axios from "axios";
export default {
  name: "ShebaoDetail",
  components: {
    //  tableDetail,
    feedBack
  },

  data() {
    return {
      tabs: {},
      columns: [],
      datalist: [],
      defaultKey: "all",
      allOptions: {},
      finishedOptions: {},
      unFinishedOptions: {},
      errorOptions: {},
      feedVisible: false,
      feedOptions: {},
      actionDetail: {},
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null
      },
      keyWord: undefined,

      selectedRowKeys: [],
      params: {
        state: undefined,
        // showItem: true,
        // pageNo: 1,
        // pageSize: 10,
        missionCenterId: ""
      }
    };
  },
  computed: {
    ...mapState(["hr"])
  },

  created() {
    this.params.missionCenterId = this.$route.query.socDispatchId;
    this.actionDetail = JSON.parse(this.$route.query.actionDetail);
    var arr = [];
    arr = this.actionDetail.headList;
    arr.forEach((item, index) => {
      this.columns.push({
        title: `${item}`,
        dataIndex: `${item}`,
        align: "center",
        width: item === "身份证号" ? 180 : 120,
        fixed: item === "姓名" || item === "身份证号" ? "left" : null
      });
    });
    this.columns.push(
      { title: `状态`, dataIndex: `state`, width: 120, align: "center", scopedSlots: { customRender: "state" } },
      { title: `反馈人`, dataIndex: `feedbackUser`, align: "center", width: 120 },
      { title: `反馈内容`, dataIndex: `remark`, align: "center", width: 110, ellipsis: true },
      {
        title: `反馈时间`,
        dataIndex: `feedbackDate`,
        align: "center",
        width: 180,
        scopedSlots: { customRender: "feedbackDate" }
      }
    );

    this.getDetail();
    // this.getNavs();
  },

  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    daochu() {
      var dat = {
        missionCenterId: this.params.missionCenterId
      };
      if (this.keyWord) {
        dat.keyWord = this.keyWord;
      }
      if (this.params.state !== undefined) {
        dat.state = this.params.state;
      }
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        dat.itemIdList = this.selectedRowKeys;
      }

      axios({
        url: `/hr/api/v1/missionCenterItems/exportReceivePath`,
        method: "post",
        data: dat,
        responseType: "blob"
        // headers: {
        //   token: token,
        //   "Content-Type": "application/json"
        // }
      })
        .then(res => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute(
            "download",
            `${this.actionDetail.year + "年" + this.actionDetail.month + "月" + this.actionDetail.missionName}` + ".xlsx"
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
      // this.$request({
      //   url: `/hr/api/v1/missionCenterItems/exportReceivePath/` + this.$route.query.socDispatchId,
      //   method: "POST",
      //   responseType: "blob"
      // }).then(({ data }) => {
      // if (data && data.type === "application/json") {
      //       const link = document.createElement("a");
      //     const blob = new Blob([data], {
      //       type: "application/vnd.ms-excel"
      //     });
      //     link.style.display = "none";
      //     link.href = URL.createObjectURL(blob);
      //     link.setAttribute("download", `${this.$store.state.hr.companyName}_` + "员工导出记录" + ".xlsx");
      //     document.body.appendChild(link);
      //     link.click();
      //     document.body.removeChild(link);
      // }
      // });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getDetail();
    },
    goBack() {
      this.$router.push({
        path: `/shebao/paidan`,
        query: { ...this.$route.query }
      });
    },
    getDetail() {
      this.datalist = [];
      this.$request({
        url: `/hr/api/v1/missionCenterItems/selectMissionCenterItem`,
        params: { ...this.params, pageNo: this.pagination.current, pageSize: this.pagination.pageSize }
      }).then(res => {
        var arr = {};
        this.pagination.total = res.data && res.data.entityCount;
        // this.datalist = JSON.parse(JSON.stringify(res.data.entities));
        res.data.entities.forEach(item => {
          arr = JSON.parse(item.tableData);
          arr.state = item.state;
          arr.feedbackUser = item.feedbackUser;
          arr.remark = item.remark;
          arr.feedbackDate = item.feedbackDate;
          arr.id = item.id;
          this.datalist.push(arr);
        });
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.socDispatchId}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    // 搜索姓名
    onSearchName(name) {
      name ? (this.params.name = name) : delete this.params.name;
      // this.params.pageNo = 1;
      this.getDetail();
    },
    // 切换详情
    changeTab(i) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.defaultKey = i;
      this.params.state = undefined;
      if (typeof i === "number") {
        this.params.state = i;
      }
      this.getDetail();
    },
    handleNav(e) {},
    handleTable(e) {
      this.feedVisible = e.visible;
      this.feedOptions = e.e;
      if (e.current) {
        this.params.pageNo = e.current;
        this.getDetail();
      }
    },
    handleDetail(e) {
      this.feedVisible = e.visible;
    }
  }
};
</script>
<style lang="scss" scoped>
.personStyle {
  font-size: 14px;
  font-weight: 500;
  color: #3c3d43;
  margin-bottom: 3px;
}
.personStyleSelect {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 3px;
}
.contentStyle {
  font-size: 24px;
  font-weight: bold;
  color: #55565d;
  margin-top: 6px;
}
.contentStyleSelect {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary);
  margin-top: 6px;
}
.titleBox {
  width: 100%;
  display: flex;

  .titleStyle {
    font-size: 14px;
    font-weight: 400;
    color: #767885;
  }
  .titleStyleSelect {
    font-size: 14px;
    font-weight: 400;
    color: var(--primary);
  }
}
.payslip-detail {
  padding: 24px;
  .top {
    position: relative;
    padding-left: 15px;
    .pos {
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
}
.salary {
  cursor: pointer;
  margin: 24px 0;
  .item {
    padding: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
.last-item-wrapper2 {
  cursor: default;
  color: var(--primary);
}
</style>
